<!--
 * @Author: whr2349
 * @Date: 2021-03-04 16:40:19
 * @LastEditors: whr2349
 * @LastEditTime: 2021-03-04 17:08:14
 * @Description: file content
 * @FilePath: \webadmin\src\views\sys\user.vue
-->
<!--user  2021.03.04 @王浩然QQ378237242-->
<template>
  <div class="" style="">
    <el-button
        type="primary"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
    >新增用户
    </el-button
    >

    <whrtable
        :table-data="table"
        :table-height-y="242"
        :current-page="currentPage"
        :total="total"
        @current-change="handleCurrentChange"
    >
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="密码" prop="password"></el-table-column>
      <el-table-column label="生日" prop="birthday">
        <template #default="scope">
          {{ $timestampFormat(scope.row.birthday, "YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column label="组织" prop="organization">
        <template #default="scope">
          {{ scope.row.organization.name }}
        </template>
      </el-table-column>
      <el-table-column label="是否在线" prop="isLogin">
        <template #default="scope">
          <el-tag :type="scope.row.isLogin ? 'success' : 'info'">
            {{ scope.row.isLogin ? "在线" : "离线" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template #default="scope">
          <el-switch v-model="scope.row.isUsing"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template #default="scope">
          {{
            $timestampFormat(
                scope.row.createdTime,
                "YYYY-MM-DD HH:mm:ss"
            )
          }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updatedTime">
        <template #default="scope">
          {{
            $timestampFormat(
                scope.row.updatedTime,
                "YYYY-MM-DD HH:mm:ss"
            )
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              @click.stop="edituser(scope.$index, scope.row)"
          >编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click.stop="deleteuser(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </whrtable>
    <el-dialog
        :title="dialogTitle"
        v-model="dialogFormVisible"
        append-to-body
        width="30%"
        @close="close"
    >
      <el-form
          :model="form"
          :label-width="formLabelWidth"
          label-position="left"
      >
        <el-form-item label="用户名">
          <el-input
              class="forminput"
              v-model="form.userName"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
              class="forminput"
              v-model="form.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
              class="forminput"
              v-model="form.birthday"
              type="datetime"
              placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所属组织">
          <el-select
              v-model="form.organization"
              placeholder="请选择"
              class="forminput"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                    >
                    <el-button type="primary" @click="clickConform"
                    >确 定</el-button
                    >
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import whrtable from "@/components/whrtable";
import {getCurrentInstance} from "vue";
import {onMounted, reactive, toRefs} from "vue";
import {ElMessage} from "element-plus";
import moment from "moment";

export default {
  components: {
    whrtable,
  },

  data() {
    return {};
  },
  created() {
  },
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {
    changeUsing(index, data) {
      this.$nextTick(function () {
        this.tableData[index].isUsing = data.isUsing;
      });
      console.log(this.tableData[0].isUsing);
    },
  },

  setup(props) {
    const internalInstance = getCurrentInstance();
    const request =
        internalInstance.appContext.config.globalProperties.$request;

    const tabState = reactive({
      table: [],
      total: 0,
      currentPage: 1,
    });
    const tableMedthods = {
      close() {
        formState.form = {
          name: "",
          key: "",
          superiorKey: "",
          sort: 1,
        }
      },
      getdata() {
        request
            .one({
              url: "user",
              data: {
                currentPage: tabState.currentPage,
                pageSize: 20,
              },
            })
            .then((res) => {
              if (res.success) {
                tabState.table = res.data.data;
                tabState.total = res.data.total;
              }
            });
      },
      edituser(index, row) {
        console.log(index, row);
        formState.dialogFormVisible = true
        formState.dialogTitle = '编辑用户'
        formState.form = row
      },
      deleteuser(index, row) {
        console.log(index, row);
      },
      handleCurrentChange($event) {
        if (typeof $event === "number" && !isNaN($event)) {
          tabState.currentPage = Number($event);
          tableMedthods.getdata();
        } else {
          return false;
        }
      },
    };

    const formState = reactive({
      dialogFormVisible: false,
      form: {
        userName: "",
        password: "",
        organization: "",
        birthday: "",
      },
      dialogTitle: "新增用户",
      formLabelWidth: "120px",
      options: [],
    });
    const formMedhods = {
      getOrganization() {
        request
            .one({
              url: "organization",
            })
            .then((res) => {
              if (res.success) {
                formState.options = res.data.data.map((o) => {
                  return {
                    value: o._id,
                    label: o.name,
                  };
                });
              }
            });
      },
      clickConform() {
        console.log(formState.form.birthday);
        formState.form.birthday = moment(
            formState.form.birthday
        ).format("x");
        console.log(formState.form.birthday);
        request
            .one({
              url: "user",
              type: "POST",
              data: {
                ...formState.form,
              },
            })
            .then((res) => {
              if (res.success) {
                ElMessage.success("操作成功");
                tableMedthods.getdata();
              }
            });
        formState.dialogFormVisible = false;
      },
    };
    onMounted(() => {
      tableMedthods.getdata();
      formMedhods.getOrganization();
    });
    return {
      ...toRefs(formState),
      ...formMedhods,
      ...toRefs(tabState),
      ...tableMedthods,
    };
  },
};
</script>
<style scoped>
/* 引入公共css类 */
/*@import url()*/
.forminput {
  width: 220px;
}
</style>
